<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
</head>
<body>
<div class="layui-panel" style="padding: 8px;">
    <fieldset class="layui-elem-field layui-border-blue">
        <legend>搜索信息</legend>
        <form class="layui-form layui-form-pane" style="margin: 20px;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" name="name" autocomplete="off" />
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <a class="layui-btn layui-btn-primary" lay-submit="" lay-filter="searchBtn">
                            <i class="layui-icon layui-icon-search"></i>
                            搜索
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </fieldset>
    <div>
        <table id="commodityTable" lay-filter="commodityTable"></table>
    </div>
</div>
<script id="tool" type="text/html">
    {{# if(d.state!='下架'){ }}
    {{# if(d.state!='在售'&&d.state!='交易'){ }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    {{# }}}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">详情</a>
    {{# }}}
</script>
<script>
    var $;
    layui.use(['layer','table','jquery'],function (){
        var layer=layui.layer,table=layui.table;
        $=layui.jquery;



        table.render({
            elem:'#commodityTable',
            height:'full-160',
            page:true,
            toolbar:'#tableBar',
            url:'/system/ct/find',
            cols:[
                [
                    {type:'numbers',fixed:'left',style:'height:70px'},
                    {type:'checkbox',fixed:'left'},
                    {field:'name',title:'商品名称',width:150},
                    {field:'category',title:'商品类目',width:100},
                    {field:'img',title:'图片',width:80,templet: '#photo',align: 'center'},
                    {field:'marketPrice',title:'市场售价',width: 100},
                    {field:'price',title:'当前售价',width:100},
                    {field:'newCommodity',title:'是否新品',width:100},
                    {field:'hot',title:'是否热品',width:100},
                    {field:'keyword',title:'关键字',width:80},
                    {field:'brand',title:'品牌',width:100},
                    {field:'specifications',title:'规格',width:80},
                    {field:'stock',title:'库存',width:80},
                    {field:'state',title:'状态',width:100},
                    {fixed:'right',title:'操作',width:200,align:'center',toolbar:'#tool'},
                ]
            ]
        })

        var active = {
            addOrUpdate: function (content) {
                var b = false;
                top.layer.open({
                    type: 2,
                    content: content,
                    area: ['700px', '650px'],
                    btn: ['确认保存', '取消关闭'],
                    btn1: function (i, o) {
                        b = true;
                        o.find('iframe')[0].contentWindow.btnSubmit();
                    },
                    end: function () {
                        if (b) layui.table.reload('commodityTable');
                    }
                })
            },
            delete: function (data) {
                layer.confirm('确定删除？',function(index){
                $.ajax({
                    type: 'post',
                    url: '/system/ct/delete',
                    data: {
                        id: data
                    },
                    dataType: 'json',
                    success: function (result) {
                        layer.msg(result.msg)

                        if (result.is) layui.table.reload('commodityTable');
                    }
                })
                    layer.close(index);
            })

            }


        }

        table.on('toolbar(commodityTable)', function (obj) {
            var event = obj.event;
            if ("add" == event) {
                active.addOrUpdate('/page/system/brandAdd');
            }
        })

        table.on('tool(commodityTable)', function (obj) {
            var event = obj.event;
            if ("details" == event) {
                active.addOrUpdate('/page/detail/' + obj.data.id);
            }
            if ("delete" == event) {
                active.delete(obj.data.id);
            }
            if('edit'==event){
                active.edit(obj.data.id);
            }
        });
    })
</script>

</body>
</html>